<template>
  <section id="city-list" class="city-list-container" style="display: block;">
    <van-index-bar :index-list="indexList">
      <section>
        <van-index-anchor index="定位">
          <div id="locate" class="city-title">
            定位城市
          </div>
        </van-index-anchor>
        <div class="city-list city-list-inline clearfix">
          <div class="location-city">定位失败，请点击重试</div>
        </div>
      </section>

      <section class="history-city-list">
        <van-index-anchor index="最近">
          <div id="history" class="city-title">
            最近访问城市
          </div>
        </van-index-anchor>
        <div class="city-list city-list-inline clearfix">
          <div class="city-item" data-nm="衢州" data-id="189">
            衢州
          </div>
          <div class="city-item" data-nm="北京" data-id="1">
            北京
          </div>
          <div class="city-item" data-nm="阿拉善盟" data-id="150">
            阿拉善盟
          </div>
        </div>
      </section>

      <section>
        <van-index-anchor index="热门">
          <div id="hot" class="city-title">
            热门城市
          </div>
        </van-index-anchor>
        <div class="city-list city-list-inline clearfix">
          <div class="city-item" data-nm="上海" data-id="10">
            上海
          </div>
          <div class="city-item" data-nm="北京" data-id="1">
            北京
          </div>
          <div class="city-item" data-nm="广州" data-id="20">
            广州
          </div>
          <div class="city-item" data-nm="深圳" data-id="30">
            深圳
          </div>
          <div class="city-item" data-nm="武汉" data-id="57">
            武汉
          </div>
          <div class="city-item" data-nm="天津" data-id="40">
            天津
          </div>
          <div class="city-item" data-nm="西安" data-id="42">
            西安
          </div>
          <div class="city-item" data-nm="南京" data-id="55">
            南京
          </div>
          <div class="city-item" data-nm="杭州" data-id="50">
            杭州
          </div>
          <div class="city-item" data-nm="成都" data-id="59">
            成都
          </div>
          <div class="city-item" data-nm="重庆" data-id="45">
            重庆
          </div>
        </div>
      </section>

      <section
        v-for="cities,key in newCities"
      >
        <van-index-anchor :index="key">
          <div class="city-title city-title-letter">
            {{key}}
          </div>
        </van-index-anchor>
        <div class="city-list city-list-block clearfix">
          <div 
            class="city-item" 
            v-for="city in cities"
            @click="pickCity(city)"
          >
            {{city.name}}
          </div>
        </div>
      </section>
    </van-index-bar>
  </section>
</template>

<script>
import _ from 'lodash'
import Vue from 'vue'
import { IndexBar, IndexAnchor } from 'vant'

import { mapActions } from 'vuex'

Vue.use(IndexBar)
Vue.use(IndexAnchor)

export default {
  data() {
    return {
      cities: [],
      indexList: ['定位', '最近', '热门']
    }
  },
  async mounted() {
    const cities = await this.$http.get({
      url: 'https://m.maizuo.com/gateway'
    })

    this.cities = cities.data.cities
  },
  computed: {
    newCities() {
      // 根据pinyin的首字母分组
      const result = _.groupBy(this.cities, (value) => value.pinyin.substring(0, 1).toUpperCase())

      // 按照字母排序
      const letters = Object.keys(result).sort()

      // 装填location(右侧导航)
      this.indexList = [
        ...this.indexList,
        ...letters
      ]

      // 数据重新装填
      const newResult = letters.reduce((obj, key) => {
        obj[key] = result[key]
        return obj
      }, {})

      return newResult
    }
  },

  methods: {
    ...mapActions(['changeCity']),
    pickCity(city) {
      this.changeCity(city)
      this.$router.back()
    }
  }
}
</script>

<style lang='stylus' scoped>
.city-list-container {
  display: none;
  background-color: #ebebeb;
  font-size: 14px;
  color: #333;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 1000;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch
}

.clearfix:after {
  content: " ";
  display: table;
  clear: both
}

.city-title {
  padding-left: 15px;
  line-height: 30px
}

.city-title-letter {
  padding-left: 25px
}

.city-list {
  padding-right: 30px
}

.city-list-inline {
  background-color: #f5f5f5;
  padding-bottom: 8px
}

.city-list-inline .city-item,
.city-list-inline .location-city {
  float: left;
  background: #fff;
  width: 29%;
  height: 33px;
  margin-top: 15px;
  margin-left: 4%;
  padding: 0 4px;
  border: 1px solid #e6e6e6;
  border-radius: 3px;
  line-height: 33px;
  text-align: center;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.city-list-inline .location-city {
  width: auto;
  min-width: 30%;
  padding: 0 20px
}

.city-list-block {
  background-color: #f5f5f5
}

.city-list-block .city-item {
  height: 44px;
  line-height: 44px;
  margin-left: 15px;
  border-bottom: 1px solid #c8c7cc
}

.city-list-block .city-item:last-child {
  border-bottom: none
}

.nav {
  position: fixed;
  top: 75px;
  top: 11vh;
  right: 0;
  width: 35px;
  z-index: 10;
  text-align: center;
  font-size: 12px
}

.nav .nav-item {
  height: 16px;
  height: 2.8vh
}

.nav .nav-letter {
  width: 15px;
  margin-left: 15px
}
</style>